<template>
  <!-- 顶部工工具按钮  -->
  <div class="tools">
    <div
      v-for="item in btnList"
      :key="item.id"
      class="tool"
      @mouseenter="mouseEvt(item, '1')"
      @mouseleave="mouseEvt(item, '2')"
      @click="handleClick(item.id)"
      v-html="getIcon(item)" />
  </div>
</template>

<script>
// import 《组件名称》 from '《组件路径》';

export default {
  components: {},
  data() {
    return {
      btnList: [
        {
          id: 'tool1',
          color: '#666666',
          remark: '距离测量'
        },
        {
          id: 'tool2',
          color: '#666666',
          remark: '面积测量'
        },
        {
          id: 'tool3',
          color: '#666666',
          remark: '卷帘'
        },
        {
          id: 'tool4',
          color: '#666666',
          remark: '放大镜'
        },
        {
          id: 'tool5',
          color: '#666666',
          remark: '全屏'
        },
        {
          id: 'tool6',
          color: '#666666',
          remark: '清除'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    mouseEvt(item, type) {
      item.color = type === '1' ? '#1890ff' : '#666666'
    },
    getIcon(item) {
      let icon = null
      switch (item.id) {
        case 'tool1':
          icon = `
          <svg t="1680596790982" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2852" width="3vh" height="3vh"><path d="M832 640H384V192c0-36.266667-27.733333-64-64-64H192C155.733333 128 128 155.733333 128 192v597.333333c0 27.733333 10.666667 55.466667 32 74.666667 19.2 21.333333 46.933333 32 74.666667 32h597.333333c36.266667 0 64-27.733333 64-64v-128c0-36.266667-27.733333-64-64-64z m21.333333 192c0 12.8-8.533333 21.333333-21.333333 21.333333h-106.666667v-64c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333v64h-85.333334v-64c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333v64h-85.333334v-64c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333v64h-85.333334v-64c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333v64h-64c-17.066667 0-34.133333-6.4-44.8-19.2-12.8-12.8-19.2-27.733333-19.2-44.8v-106.666666h64c12.8 0 21.333333-8.533333 21.333333-21.333334s-8.533333-21.333333-21.333333-21.333333H170.666667v-85.333333h64c12.8 0 21.333333-8.533333 21.333333-21.333334s-8.533333-21.333333-21.333333-21.333333H170.666667v-85.333333h64c12.8 0 21.333333-8.533333 21.333333-21.333334s-8.533333-21.333333-21.333333-21.333333H170.666667v-85.333333h64c12.8 0 21.333333-8.533333 21.333333-21.333334s-8.533333-21.333333-21.333333-21.333333H170.666667V192c0-12.8 8.533333-21.333333 21.333333-21.333333h128c12.8 0 21.333333 8.533333 21.333333 21.333333v469.333333c0 12.8 8.533333 21.333333 21.333334 21.333334h469.333333c12.8 0 21.333333 8.533333 21.333333 21.333333v128z" fill="${
  item.color
}" p-id="2853"></path></svg>
          `
          break
        case 'tool2':
          icon = `
          <svg t="1680596878704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3027" width="2.7vh" height="2.7vh"><path d="M305.222589 369.323416l56.875454-56.875453 361.982812 361.984234-56.875454 56.875454z" p-id="3028" fill="${
  item.color
}"></path><path d="M1024.270294 292.685236V0H731.058696v103.422848H292.685236V0H0v292.685236h103.465526v438.629528H0v292.685236h292.685236v-103.422848h438.615302v103.422848H1023.985774V731.314764h-106.125783V292.685236zM825.988636 98.628694h99.752546v98.657145h-99.752546z m-728.469568-1.010045h97.547519v97.632876H97.519068z m97.547519 831.977772H97.519068V828.947639h97.547519z m731.314764-3.044359h-94.517387V828.947639h94.517387z m-88.95503-195.237298h-106.125783v103.422847H292.685236v-103.422847H189.205485V292.685236h103.451299V189.205485h438.401912v103.422847h106.367625z" p-id="3029" fill="${
  item.color
}"></path></svg>
          `
          break
        case 'tool3':
          icon = `
          <svg t="1680597463604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3980" width="2.7vh" height="2.7vh"><path d="M48.761905 146.285714h926.47619v731.428572H48.761905V146.285714z m460.8 91.428572v548.571428h373.028571V237.714286H509.561905z" fill="${
  item.color
}" p-id="3981"></path><path d="M438.857143 0h97.523809v1024H438.857143z" fill="${
  item.color
}" p-id="3982"></path></svg>
          `
          break
        case 'tool4':
          icon = `
          <svg t="1680597353425" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2854" width="3vh" height="3vh"><path d="M480.653061 867.265306c-213.159184 0-386.612245-173.453061-386.612245-386.612245s173.453061-386.612245 386.612245-386.612245 386.612245 173.453061 386.612245 386.612245-173.453061 386.612245-386.612245 386.612245z m0-731.428571c-190.171429 0-344.816327 154.644898-344.816326 344.816326s154.644898 344.816327 344.816326 344.816327 344.816327-154.644898 344.816327-344.816327-154.644898-344.816327-344.816327-344.816326z" fill="${
  item.color
}" p-id="2855"></path><path d="M741.877551 501.55102c-11.493878 0-20.897959-9.404082-20.897959-20.897959 0-132.702041-107.62449-240.326531-240.326531-240.32653-11.493878 0-20.897959-9.404082-20.897959-20.89796s9.404082-20.897959 20.897959-20.897959c155.689796 0 282.122449 126.432653 282.122449 282.122449 0 11.493878-9.404082 20.897959-20.897959 20.897959zM909.061224 929.959184c-5.22449 0-10.44898-2.089796-14.628571-6.269388l-170.318367-170.318367c-8.359184-8.359184-8.359184-21.420408 0-29.779592 8.359184-8.359184 21.420408-8.359184 29.779592 0l170.318367 170.318367c8.359184 8.359184 8.359184 21.420408 0 29.779592-4.702041 4.179592-9.926531 6.269388-15.151021 6.269388z" fill="${
  item.color
}" p-id="2856"></path></svg>
          `
          break
        case 'tool5':
          icon = `
          <svg t="1680597612479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5498" width="3vh" height="3vh"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="${
  item.color
}" p-id="5499"></path></svg>
          `
          break
        case 'tool6':
          icon = `
          <svg t="1680597697124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7539" width="2.7vh" height="2.7vh"><path d="M876.564398 512.149985h30.697002c7.699248 0 15.398496 0 22.997754-2.599746 33.296748-8.999121 46.095498-43.495752 37.096378-104.889757-3.799629-28.197246-24.297627-46.095498-54.99463-46.095498H614.290011v-24.297627c0-65.293624-3.799629-130.487257 0-195.780881C616.889757 75.792598 589.992384 18.198223 537.49751 2.899717c-15.398496-3.799629-38.39625-3.799629-51.195 0C458.105263 13.098721 421.008886 39.996094 413.409628 79.692218c-2.599746 12.79875-3.799629 24.297627-3.799629 35.796504v243.076262H113.938873c-40.896006 0-60.094131 19.198125-60.094131 61.394004v7.699249c0 72.892882 7.699248 80.59213 80.592129 84.491748 2.599746 0 6.399375 1.299873 10.199004 1.299873-28.197246 145.885753-56.294502 290.471634-86.991504 435.057514-7.699248 35.796504 0 62.693878 30.697002 75.492628h844.417537c29.397129-12.79875 38.39625-38.39625 31.996876-72.892882-30.597012-145.985744-58.794258-290.571624-88.191388-438.957133zM509.300264 54.094717c31.996875 0 52.494874 22.997754 52.494873 61.394005 0 74.192755 1.299873 147.185626 1.299873 221.378381v21.797871H459.405136V115.488722c0-37.096377 19.198125-60.194122 49.895128-61.394005zM102.439996 460.954985v-51.195001h818.820037V460.954985H102.439996z m200.880383 511.750024c8.999121-63.993751 17.898252-133.087003 26.897373-199.580509 1.299873-11.498877 2.599746-21.797871 3.799629-31.996876 1.299873-15.398496-3.799629-28.197246-19.198125-30.697002-17.898252-2.599746-28.197246 6.399375-30.697002 22.997754-6.399375 42.195879-11.498877 83.191876-17.898252 125.387755-3.799629 37.096377-8.999121 75.492628-14.098624 113.888878H103.739869c33.296748-153.585001 66.493506-307.070013 101.090128-460.655014h610.340397c33.296748 153.585001 66.493506 307.070013 101.090127 460.655014h-612.940142z" p-id="7540" fill="${
  item.color
}"></path></svg>
          `
          break
        default:
          break
      }
      return icon
    },
    handleClick(id) {
      this.$emit('toolClick', id)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
.tools {
  position: absolute;
  top: 2vh;
  left: 50%;
  transform: translateX(-50%);
  width: 30vh;
  height: 4vh;
  background-color: aliceblue;
  border-radius: 4px;
  box-shadow: -3px 5px 7px #9c91916b;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 101;
  .tool {
    cursor: pointer;
  }
}
</style>
